<template>
  <view class="container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="search-box" @click="handleSearch">
        <uni-icons type="search" size="18" color="#999"></uni-icons>
        <text class="placeholder">搜索附近寄存点</text>
      </view>
      <view class="location">
        <uni-icons type="location-filled" size="18" color="#FF7F00"></uni-icons>
        <text>{{currentCity}}</text>
      </view>
    </view>
    
    <!-- 轮播图 -->
    <swiper 
      class="swiper" 
      indicator-dots 
      autoplay 
      circular 
      :interval="3000"
      v-if="banners.length"
    >
      <swiper-item v-for="(item, index) in banners" :key="index">
        <image :src="item.image" mode="aspectFill" class="swiper-img" @click="handleBannerClick(item)"></image>
      </swiper-item>
    </swiper>
    
    <!-- 功能区 -->
    <view class="function-grid">
      <view 
        class="grid-item" 
        v-for="(item, index) in gridItems" 
        :key="index"
        @click="handleGridClick(item.type)"
      >
        <view class="grid-icon" :style="{backgroundColor: item.bgColor}">
          <uni-icons :type="item.icon" size="30" color="#fff"></uni-icons>
        </view>
        <text class="grid-text">{{item.text}}</text>
      </view>
    </view>
    
    <!-- 附近站点 -->
    <view class="section" v-if="nearbyDepots.length">
      <view class="section-header">
        <text class="section-title">附近寄存点</text>
        <text class="section-more" @click="handleViewMore">更多 ></text>
      </view>
      
      <view class="depot-list">
        <view 
          class="depot-card" 
          v-for="(depot, index) in nearbyDepots" 
          :key="index"
          @click="handleDepotClick(depot.id)"
        >
          <image :src="depot.image" class="depot-img"></image>
          <view class="depot-info">
            <view class="depot-name">{{depot.name}}</view>
            <view class="depot-location">
              <uni-icons type="location" size="14" color="#999"></uni-icons>
              <text>{{depot.distance}} | {{depot.address}}</text>
            </view>
            <view class="depot-price">
              <text class="price">¥{{depot.price}}<text class="unit">/小时起</text></text>
              <view class="tag orange-tag">{{depot.size}}箱型</view>
            </view>
            <view class="depot-meta">
              <text class="meta-item">营业中 {{depot.hours}}</text>
              <text class="meta-item">空闲 {{depot.available}}个</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 无数据提示 -->
    <view class="empty" v-if="!loading && !nearbyDepots.length">
      <image src="/static/empty-depot.png" class="empty-img"></image>
      <text class="empty-text">附近暂无寄存点</text>
      <text class="empty-tip">请尝试扩大搜索范围</text>
    </view>
    
 
    <!-- 加载指示器 -->
    <view class="loading" v-if="loading">
      <uni-load-more status="loading"></uni-load-more>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      banners: [],
      gridItems: [],
      nearbyDepots: [],
      currentCity: '定位中...',
      loading: true,
      location: null
    }
  },
  onLoad() {
    this.getLocation()
  },
  methods: {
    // 获取用户位置
    async getLocation() {
      try {
        const res = await uni.getLocation({
          type: 'wgs84',
          isHighAccuracy: true
        })
        
        this.location = {
          latitude: res.latitude,
          longitude: res.longitude
        }
        
        // 获取城市信息（简化处理）
        this.currentCity = await this.getCityName(res.latitude, res.longitude)
        
        // 获取首页数据
        this.loadHomeData()
      } catch (e) {
        console.error('获取位置失败:', e)
        this.currentCity = '未知位置'
        this.loadHomeData()
      }
    },
    
    // 获取城市名称（简化实现）
    async getCityName(latitude, longitude) {
      // 实际项目中应使用腾讯地图或高德地图的逆地址解析API
      try {
        const res = await uniCloud.callFunction({
          name: 'get-city',
          data: {
            latitude,
            longitude
          }
        })
        return res.result.city || '未知城市'
      } catch (e) {
        console.error('获取城市信息失败:', e)
        return '未知城市'
      }
    },
    
    // 加载首页数据
    async loadHomeData() {
      this.loading = true
      
      try {
        const home = uniCloud.importObject('page-cloud-index')
        const res = await home.getHomeData(
          this.location?.latitude, 
          this.location?.longitude
        )
        
        if (res.code === 0) {
          this.banners = res.data.banners
          this.gridItems = res.data.gridItems
          this.nearbyDepots = res.data.nearbyDepots
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      } catch (e) {
        console.error('加载首页数据失败:', e)
        uni.showToast({
          title: '加载首页数据失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 处理搜索点击
    handleSearch() {
      uni.navigateTo({
        url: '/pages/search/search'
      })
    },
    
    // 处理功能点击
    handleGridClick(type) {
      if (type === 'deposit') {
        uni.navigateTo({
          url: '/pages/depot/map'
        })
      } else if (type === 'promo') {
        uni.navigateTo({
          url: '/pages/promo/list'
        })
      }
    },
    
    // 处理寄存点点击
    handleDepotClick(id) {
      uni.navigateTo({
        url: `/pages/depot/detail?id=${id}`
      })
    },
    
    // 查看更多
    handleViewMore() {
      uni.navigateTo({
        url: '/pages/depot/list'
      })
    },
    
    // 处理轮播图点击
    handleBannerClick(banner) {
      if (banner.link) {
        uni.navigateTo({
          url: banner.link
        })
      }
    }
  }
}
</script>

<style lang="scss">
$primary-color: #FF7F00;

.container {
  padding-bottom: 60px;
  background-color: #f8f8f8;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  
  .search-box {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 20px;
    padding: 8px 15px;
    margin-right: 10px;
    
    .placeholder {
      color: #999;
      margin-left: 8px;
    }
  }
  
  .location {
    display: flex;
    align-items: center;
    font-size: 14px;
    
    text {
      margin-left: 3px;
      max-width: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.swiper {
  height: 180px;
  margin: 0 15px;
  border-radius: 10px;
  overflow: hidden;
  
  .swiper-img {
    width: 100%;
    height: 100%;
  }
}

.function-grid {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  background-color: #fff;
  margin: 10px 15px;
  border-radius: 10px;
  
  .grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .grid-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
  }
  
  .grid-text {
    font-size: 12px;
    color: #333;
  }
}

.section {
  background-color: #fff;
  margin: 10px 15px;
  border-radius: 10px;
  padding: 15px;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
  
  .section-more {
    font-size: 13px;
    color: #999;
  }
}

.depot-list {
  .depot-card {
    display: flex;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    
    &:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
  }
  
  .depot-img {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    margin-right: 12px;
  }
  
  .depot-info {
    flex: 1;
  }
  
  .depot-name {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .depot-location {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
    
    text {
      margin-left: 3px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
  
  .depot-price {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    
    .price {
      color: $primary-color;
      font-size: 16px;
      font-weight: bold;
      margin-right: 10px;
      
      .unit {
        font-size: 12px;
        font-weight: normal;
      }
    }
    
    .tag {
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 4px;
    }
    
    .orange-tag {
      background-color: #FFF5EB;
      color: $primary-color;
    }
  }
  
  .depot-meta {
    display: flex;
    
    .meta-item {
      font-size: 12px;
      color: #666;
      margin-right: 15px;
    }
  }
}

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  height: 50px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
  
  .tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: #999;
    
    &.active {
      color: $primary-color;
    }
  }
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  
  .empty-img {
    width: 150px;
    height: 150px;
    margin-bottom: 15px;
  }
  
  .empty-text {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
  }
  
  .empty-tip {
    font-size: 14px;
    color: #999;
  }
}

.loading {
  padding: 20px 0;
  display: flex;
  justify-content: center;
}
</style>